<!DOCTYPE html >
<!--suppress ALL-->
<html long="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>永和大王门店管理系统</title>
</head>
<body style="padding: 20px;">

<div style="padding: 5px;">
    <h1>永和大王门店管理系统-门店修改</h1>
</div>
<form>
    <input type="text" name="username" id="username" placeholder="请输入账号">
    <span id="sp"></span>
    <br>
    <input type="password" name="password" id="password" placeholder="请输入密码">
    <br>
    <input type="submit" value="提交">
</form>
</body>
<script src="/js/jquery.min.js"></script>
<script>
    //给id的username的元素添加一个失去焦点事件
    //使用JQuery 选中页面中的某一个元素
    //$和id对应 .和class对应
    //blur(匿名函数)失去焦点事件  focus()聚焦事件
    //click()点击事件
    //focus()聚焦事件     change()值改变事件
    /*$("#username").blur(function(){
        var username=$("#username").val();
        //判断内容和类型都相同用三个等号来判断
        if(username==null||username===""){
            alert("用户名必填");
            return;//表示结束当前方法，不再往下执行
        }
        //发起ajax请求
        $.ajax({
            //第一种
            url:"/checkUserName", //请求的服务端路径
            data:"username="+username,//向服务器提交的参数（提交的数据）
            type:"post",//请求的类型 post get
            dataType:"json",//服务端返回的数据类型
            success:function (obj){//回调函数
                //obj 是一个变量 接收从服务端返回的JSON 数据
                if(obj.state==200){
                    $("#sp").html(obj.message);
                    //attr() 可以获取属性和属性设置 和设置属性
                    $("#sp").attr("style","color:green");
                }else {
                    $("#sp").html(obj.message);
                    //attr() 可以获取属性和属性设置 和设置属性
                    $("#sp").attr("style","color:red");
                }
            },
            error:function (){}

        })



    });
    */

    //第二种发ajax的方式
   /* $.post();

    $("#username").blur(function (){
        //获取用户输入的值
        var username=$("#username").val();//输入框获取值用.val
        //$.post(请求路径，请求参数，回调函数，服务端数据的返回类型)
        $.post("/checkUserName",{"username":username},function (data){
            if(data.state==200){
                $("#sp").html(data.message);
                //attr() 可以获取属性和属性设置 和设置属性
                $("#sp").attr("style","color:green");
            }else {
                $("#sp").html(data.message);
                //attr() 可以获取属性和属性设置 和设置属性
                $("#sp").attr("style","color:red");
            }
        },"json");
    });
    */



    //第三种方式
    // $.get(请求路径，请求参数，回调函数，服务端数据的返回类型);


    //第四种方式
    // $.getJSON(请求路径，请求参数，回调函数，服务端数据的返回类型);

    $("#username").blur(function (){
        //获取用户输入的值
        var username=$("#username").val();
        var url="/checkUserName";
        var param={"username":username};
        $.getJSON(url,param,function (data){
            if (data.state==200){
                $("#sp").html(data.message);
                $("#sp").attr("style","color:green");
            }
            else {
                $("#sp").html(data.message);
                $("#sp").attr("style","color:red");
            }

        });
    })
</script>
</html>

